<template>
  <div>
    <el-dialog :title='option.title' :visible.sync='isShow' @close="closeUser"  width="890px" @open="openCreate"
      :close-on-click-modal="false" center  append-to-body>
      <div v-loading="loading">
        <div class="content">
          <el-card>
            <el-form size="mini" ref="form" :model="form" label-width="140px" label-position="right" class="my-form">
              <el-row :gutter="10">
                <!-- 增加符号： -->
                 <el-col :span="18">
                  <el-form-item prop="symbol">
                    <el-select v-model="form.symbol"  filterable placeholder="请选择增加符号:">
                      <el-option
                        v-for="item in symbolList"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                   <el-button type="primary" size="mini" @click="addSymbol">增加符号</el-button>
                 </el-col>
                 <el-col :span="18">
                  <el-form-item prop="key" label="*">
                    <el-select v-model="form.key" filterable clearable placeholder="请选择KEY值：" :loading="loading" @change="changeKey">
                      <el-option
                        v-for="item in KEYNAMEList1"
                        :key="item.ID"
                        :label="item.KEYNAME"
                        :value="item.KEYNAME"
                      ></el-option>
                    </el-select>
                  </el-form-item>   
                </el-col>
                <el-col :span="6">
                   <el-button type="primary" size="mini" @click="addKEY">增加KEY</el-button>
                </el-col>
                 <!-- 增加因子 -->
                <el-col :span="18">
                  <el-form-item prop="monikey" label="*">
                    <el-select v-model="form.monikey" filterable clearable placeholder="请选择因子：" :loading="loading" 
                      :disabled="form.key == '' || form.key == null">
                      <el-option
                        v-for="item in monikeyList"
                        :key="item.key"
                        :label="item.name"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>   
                </el-col>
                <el-col :span="6">
                   <el-button type="primary" size="mini" @click="addMonikey">增加因子</el-button>
                </el-col>
                <!-- 数字expression_name -->
                <el-col :span="18">
                  <el-form-item prop="number">
                    <el-input v-model="form.number" placeholder="请输入数字：" ></el-input>
                  </el-form-item> 
                </el-col>
                <el-col :span="6">
                   <el-button type="primary" size="mini" @click="addNumber">增加数字</el-button>
                 </el-col>
                <!--表达式-->
                 <el-col :span="18">
                  <el-form-item prop="express">
                    <el-input type="textarea" v-model="form.express" :autosize="{ minRows:6,maxRows:12}" placeholder="请输入表达式，例如:视频队列_接通量/视频队列_总进线量" ></el-input> 
                  </el-form-item>
                </el-col>
                 <el-col :span="6">
                    <el-button type="primary" size="mini" @click="resetForm">重置</el-button>
                 </el-col>
              </el-row>
            </el-form>
          </el-card>
          <div style="text-align:center;margin-top:20px">
            <el-button size="mini" @click='addType'>取消</el-button> 
            <el-button type="primary" size="mini" @click="addKeylist">确认</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import requestYg from "@/common/utils/requestYg";
import query from "@/message/paramManagement/factorToMaintain/queryfactorToMaintain";
import queryMonitorKey from "@/message/paramManagement/monitorKey/queryMonitorKey";
export default {
  name: "",
  data() {
    return {
      loading: false,
      symbolList: [
        { name: "(", value: "(" },
        { name: ")", value: ")" },
        { name: "+", value: "+" },
        { name: "-", value: "-" },
        { name: "*", value: "*" },
        { name: "/", value: "/" },
        { name: "|", value: "|" },
      ],
      funList:[
        { name: "sum", value: "sum" },
        { name: "age", value: "age" },
        { name: "count", value: "count" },
      ],
      form:{ 
        express:"",
        symbol:"",
        number:"",
        monikey:"",
        fun:"",  
        key:"",
      },
      // 远程获取因子数据配置
      monikeyList: [],
      states:[],
      KEYNAMEList: [],  //监控因子列表
      KEYNAMEList1: [
        {}
      ],  //监控因子列表
      AGENTFLAG: '', //类型 ,坐席agent/队列queue
      Level: '', //等级
    };
  },
  props: {
    //父元素传递的数据
    option: Object
  },
  components: {
  },
  computed: {
    isShow: {
      //创建用户弹窗是否显示
      get: function() {
        return this.option.isShow;
      },
      set: function(newValue) {
        this.option.isShow = newValue;
      }
    }
  },
  created: function () {
  
  },
  watch: {
  },
  methods: {
    //增加符号
    addSymbol(){
      this.form.express=this.form.express+this.form.symbol;
    },
    // 增加函数
    addFun(){
      this.form.express=this.form.express+this.form.fun;
    },
    // 增加因子
    addMonikey(){
      this.form.express=this.form.express+this.form.monikey;
    },
    // 增加KEY
    addKEY(){
      this.form.express=this.form.express+this.form.key+'_';
    },
    // 增加数字
    addNumber(){
      this.form.express=this.form.express+this.form.number;
    },
    myBlur(){
      this.$forceUpdate();
    },
    // key值修改时，获取到它对应得等级
    changeKey(val){
      this.Level = '';
      for(var i=0;i<this.KEYNAMEList.length;i++){
        if(val == this.KEYNAMEList[i].KEYNAME){
          this.Level = this.KEYNAMEList[i].KEYLEVEL;
          break;
        }
      }
      this.query();
    },
    // 根据类型选择远程请求因子数据  
    async query(){                                                                                                           
      let resBody = new query();
      resBody.data.PARAMTYPE = this.AGENTFLAG;
      resBody.data.PARAMLEVEL = this.AGENTFLAG != 'queue'?this.Level:'';
      resBody.data.STATUS = '1'
      resBody.data.PAGEFLAG = 4;
      resBody.data.PAGEROWNUM = 1000;
      resBody.data.CURRPAGE = 1;
      requestYg(resBody)
        .then(response => {
          if (response.SYS_HEAD.ReturnCode === "000000") {
            this.states = response.RSP_BODY.struct || [];
            this.monikeyList= this.states.map(item => {
              return { value: item.PARAMNAME, label: item.PARAMNAME};
            });
          } else {
            this.$message({
              type: "error",
              message: response.SYS_HEAD.ReturnMessage
            });
            this.states=[];
          }
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },
    // 根据类型选择监控KEY值
    async queryMonitorKey() {
      this.KEYNAMEList1 = []
      let arr = {}
      let resBody = new queryMonitorKey();
      resBody.data.KEYTYPE = this.AGENTFLAG;
      resBody.data.STATUS = '1'
      resBody.data.PAGEFLAG = 4;
      resBody.data.PAGEROWNUM = 1000;
      resBody.data.CURRPAGE = 1;
      requestYg(resBody)
        .then(response => {
          if (response.SYS_HEAD.ReturnCode === "000000") {
            this.KEYNAMEList = response.RSP_BODY.struct || [];
            this.KEYNAMEList.find(item=>{
              if(item.KEYNAME == this.option.key){
                this.KEYNAMEList1.push(item)
              }
              if(item.KEYNAME == '全渠道'){
                arr = item 
              }
            })
              if(this.AGENTFLAG == 'agent' && this.option.key != '全渠道'){
                this.KEYNAMEList1.unshift(arr)
              }
            
          } else {
            this.$message({
              type: "error",
              message: response.SYS_HEAD.ReturnMessage
            });
            this.KEYNAMEList = [];
          }
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },
    resetForm(){ 
      this.$refs.form.resetFields();
    },
    addKeylist(){
      this.$emit('tiggle',this.form.express);
      //  关闭弹窗，清除和重置表格数据
      this.option.isShow = false;
      this.$refs.form.clearValidate();
      this.$refs.form.resetFields();
    },
    openCreate() {
      //打开弹窗事件
      this.$nextTick(function () {
        this.updateDate();
      })
    },
    updateDate() {
      this.AGENTFLAG = this.option.AGENTFLAG || '';
      this.queryMonitorKey();
    },
    closeUser() {
      //关闭弹窗清楚表单数据并清楚表单验证
      // 重置表单数据
      this.$refs.form.clearValidate(); //清楚表单验证
      this.$refs.form.resetFields();
      this.monikeyList = [];
      this.KEYNAMEList = [];
    },
    addType() { //关闭弹窗事件，清楚表单验证
      this.option.isShow = false;
      this.$refs.form.clearValidate();
      this.$refs.form.resetFields();
    },
   },
};
</script>
<style lang="scss">
.my-form{
  .el-form-item__label{
    color: red;
  }
}
</style>
<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
}

.require {
  color: red;
}

.dialog-text {
  display: inline-block;
  width: 100%;
  text-align: center;
  color: red;
  font-size: 18px;
}
.el-card {
  overflow: inherit;
}
</style>
